<template>
  <table class="annotation-table">
    <thead>
      <tr>
        <th width="5%">位置</th>
        <th width="15%">问题类型</th>
        <th width="60%">问题描述</th>
        <th width="10%">严重性</th>
        <th width="10%">状态</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="annotation in annotations" :key="annotation.id">
        <td>{{ annotation.location }}</td>
        <td>{{ annotation.type }}</td>
        <td>{{ annotation.description }}</td>
        <td>
          <span :class="['marker', getSeverityClass(annotation.severity)]">
            {{ annotation.severity }}
          </span>
        </td>
        <td>
          <span :class="['marker', getStatusClass(annotation.status)]">
            {{ annotation.status }}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { useAnnotationTable } from '../scripts/annotationTable'

const { annotations, getSeverityClass, getStatusClass } = useAnnotationTable()
</script>